<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div id="testAnimation">
    <input v-model.number="firstNumber" type="number" step="20"> +
    <input v-model.number="secondNumber" type="number" step="20"> =
    {{ result }}
    <p>
      <AnimationItem v-bind:value="firstNumber"></AnimationItem> +
      <AnimationItem v-bind:value="secondNumber"></AnimationItem> =
      <AnimationItem v-bind:value="result"></AnimationItem>
    </p>
    <button v-on:click="login">login</button>
  </div>
</template>
<script>
  import AnimationItem from '@/components/test/widget/AnimationItem'
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: 'testAnimation',
    components: {
      AnimationItem
    },
    data () {
      return {
        firstNumber: 20,
        secondNumber: 40
      }
    },
    computed: {
      result () {
        return parseInt(this.firstNumber) + parseInt(this.secondNumber)
      },
      ...mapGetters({
        loginFlag: 'isLoginGetter',
        userIdLen: 'userIdLengthGetter'
      })
    },
    methods: {
      login () {
        let userInfo = {
          isLogin: false,
          userId: null,
          userName: null
        }
        userInfo.isLogin = true
        userInfo.userId = 110
        userInfo.userName = 'chenlei'
        alert('login '+ JSON.stringify(userInfo))
        //触发action存入vuex
        this.$store.dispatch('setUserInfo', userInfo)
      }
    }

  }

</script>
